<template>
  <div class="box">
    <div class="topBar">
      <div class="topBox">
        <div class="item item1">
          <!-- <div class="left">
            <img
              v-if="rowData.companyLogo"
              :src="`data:image/png;base64,${rowData.companyLogo}`"
              width="80px"
            />
            <div
              v-else
              style="
                width: 60px;
                height: 60px;
                border: 1px solid rgba(126, 163, 255, 0.3);
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #363657;
                background-color: #ffffff;
                color: #c5bfbf;
              "
            >
              暂无图片
            </div>
          </div> -->
          <div class="right">
            <div class="right-top">
              <span>{{ topInfo.item1 }}</span>
              <span>{{ topInfo.item2 }}</span>
            </div>
            <div class="right-top right-bottom">
              <span>发行利率：{{ topInfo.item3 }}</span>
              <el-tag size="mini" type="info">{{ topInfo.item4 }}</el-tag>
            </div>
            <div class="right-bottom">
              到期日：{{ topInfo.item5 }}
              <!-- （剩余期限：{{ topInfo.item6 }}） -->
            </div>
          </div>
        </div>
        <div class="item item2">
          <div>
            <span
              >发行主体:
              <span class="link" @click="toLink">{{ topInfo.item7 }}</span></span
            >
          </div>
          <div class="right-top right-bottom">
            <!-- <span>主体/债项：{{ topInfo.item8 }}</span> -->
            <span>债券评级：{{ topInfo.item8 }}</span>
          </div>
          <div class="right-top right-bottom">
            <!-- <span>主体/债项：{{ topInfo.item8 }}</span> -->
            <!-- <span>企业性质：{{ topInfo.item9 }}</span> -->
          </div>
        </div>
        <div class="item item3">
          <div>
            <Gauge
              :id="'guage'"
              :chartData="chartData"
              :height="'160px'"
              v-if="riskMeasureAverageInfo.riskLevel"
            />
            <div v-else style="text-align: center; margin-top: 40px">暂无数据</div>
          </div>
          <div
            style="text-align: center; margin-top: 10px"
            v-if="riskMeasureAverageInfo.dataDate"
          >
            日期：{{ riskMeasureAverageInfo.dataDate }}
          </div>
        </div>
      </div>
    </div>
    <div class="tableBox">
      <!-- TAB选项 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in tabs"
          :label="item.name"
          :name="item.value"
        ></el-tab-pane>
      </el-tabs>
      <div style="width: 100%; height: 100%">
        <DetailTab1
          v-if="activeName === 'one' && rowData.bondId"
          :rowData="rowData"
          @hookCurveChange="hookCurveChange"
          @goDetailsTab="goDetailsTab"
        />
        <DetailTab2
          v-if="activeName === 'two' && rowData.bondId"
          :rowData="rowData"
          :bondId="bondId"
        />
        <DetailTab3 v-if="activeName === 'three' && rowData.bondId" :rowData="rowData" />
        <DetailTab4 v-if="activeName === 'four' && rowData.bondId" :rowData="rowData" />
      </div>
    </div>
  </div>
</template>
<script>
import DetailTab1 from "./components/DetailTab1.vue";
import DetailTab2 from "./components/DetailTab2.vue";
import DetailTab3 from "./components/DetailTab3.vue";
import DetailTab4 from "./components/DetailTab4.vue";
import Gauge from "./components/charts/Gauge.vue";

import { BondDetails, RiskAssessment } from "@/api/customerManagement/bondRiskProfile.js";

export default {
  components: {
    DetailTab1,
    DetailTab2,
    DetailTab3,
    DetailTab4,
    Gauge,
  },
  // props: ["detailInfo"],
  data() {
    return {
      activeName: "one",
      tabs: [
        {
          name: "风险评估",
          value: "one",
        },
        {
          name: "债券信息",
          value: "two",
        },
        {
          name: "估值信息",
          value: "three",
        },
        {
          name: "债券评级信息",
          value: "four",
        },
      ],
      // 跳转过来的信息
      rowData: {},
      // 标签列表
      tagList: [],
      // 评级信息
      ratingInfo: "",
      // 风险衡量平均值
      riskMeasureAverageInfo: {
        dataDate: "",
        avg: 0,
      },
      chartData: [],
      chartLoading: false,
      // 头部信息
      topInfo: {
        // item1: "23平湖国资MTN002",
        // item2: "102300462.IB",
        // item3: "3.00",
        // item4: "中期票据",
        // item5: "2026-08-30",
        // item6: "2.77Y",
        // item7: "平湖市国有资产控股集团有限公司",
        // item8: "AA+/AA+",
        // item9: "地方国有企业",
      },
      bondId: "",
      detailInfo: {}
    };
  },
  watch: {
    activeName(val) {
      this.$nextTick(() => {});
    },
  },
  mounted() {},
  beforeDestory() {
    localStorage.removeItem("rowData");
  },
  mounted() {
    let id = localStorage.getItem('bondId')
    this.bondId = "";
    this.rowData.bondId = this.$route.query.bondId || id;
    this.getBondDetails();
    this.getRiskMeasureAverage();
  },
  methods: {
    toLink() {
      localStorage.setItem("issuerId", this.detailInfo.issuerId);
      this.$router.push({
        name: "issuerDetail",
        query: {
          issuerId: this.detailInfo.issuerId,
        },
      });
    },
    handleClick() {
      this.bondId = "";
    },
    async getBondDetails() {
      const params = {
        bondId: this.rowData.bondId,
      };
      const { data } = await BondDetails(params);
      const info = { ...data.bondInfo, ...data.bondRating };
      this.detailInfo = info
      this.topInfo = {
        item1: info.bondFname, // 债券全称
        item2: info.bondId, // 债券代码
        item3: info.issueCouponRate, // 发行利率
        item4: info.bondType, // 债券类型
        item5: info.maturityDate, // 到期日期
        // item6: info.xxx, // 剩余期限
        item7: info.issuerNm, // 发行人
        // item8: `${info.latestEntityRating}/${info.preEntityRating} `, // 主体/债项
        item8: info.bondRating,
        item9: info.entityType, // 企业性质
        issuerId: info.issuerId,
      };
    },
    async getRiskMeasureAverage(hookCurve, bondId) {
      this.chartLoading = true;
      const { data } = await RiskAssessment({
        bondId: bondId || this.rowData.bondId,
        hookCurve: hookCurve || "国债收益率曲线",
      });
      this.chartData = [];
      this.riskMeasureAverageInfo = {};
      if (data[0] && data[0].riskLevel) {
        this.riskMeasureAverageInfo = data[0];
        this.chartData = [
          {
            value: data[0].riskLevel,
          },
        ];
      }
      this.chartLoading = false;
    },
    // 挂钩曲线改变
    hookCurveChange(value) {
      this.getRiskMeasureAverage(value, "");
    },
    // 跳转到详情
    goDetailsTab(row) {
      this.bondId = row.bondId;
      this.activeName = "two";
    },
  },
};
</script>
<style lang="scss" scoped>
.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.box {
  .topBar {
    min-height: 80px;
    background-color: #262d47;
    padding: 10px;
    margin-bottom: 10px;
  }

  .topBox {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    flex-direction: row;
    .item {
      flex: 1;
      padding: 10px 20px;
      min-height: 160px;
      &:not(:last-child) {
        border-right: 1px solid #404970;
      }
      font-size: 14px;
      .right-top {
        display: flex;
        justify-content: space-between;
      }
      .right-bottom {
        margin-top: 10px;
        .el-tag {
          background-color: rgba($color: #2fa3ff, $alpha: 0.6) !important;
          border-color: rgba($color: #2fa3ff, $alpha: 0.6) !important;
          color: #fff;
        }
      }
    }
    .item1 {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      .left {
        width: 100px;
      }
      .right {
        flex: 1;
      }
    }

    .item2 {
      flex: 0.7;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
    .item3 {
      flex: 0.6;
    }
  }

  .searchList {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    height: 700px;
    overflow: scroll;

    .searchListItem {
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #959fc5;
      font-size: 12px;
      overflow: hidden; //超出隐藏
      white-space: nowrap; //不折行
      text-overflow: ellipsis; //溢出显示省略号
    }

    .searchListItem:hover {
      background: #1f9bfd !important;
      color: #fff;
      cursor: pointer;
    }
  }

  .searchListItemAct {
    background: #1f9bfd !important;
    color: #fff !important;
  }

  .bondCard {
    background-color: #262d47;
    color: #ffffff;
    margin-bottom: 10px;

    .info {
      display: flex;
      padding: 15px 20px;

      .infoItem {
        flex: 1;
      }
    }

    .infoItemLabel {
      margin-right: 30px;
      font-size: 14px;
    }

    .infoItemVal {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #d6dcff;
    }
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    flex: 1;
    padding: 15px 10px;
  }

  .tableBoxChild {
    min-height: 500px;
  }

  .el-pagination {
    text-align: right;
  }

  .leftTitle {
    height: 40px;
    line-height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding-left: 17px;
    margin-bottom: 10px;
  }

  .customersCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
.link {
  color: #1f9bfd;
  border-bottom: 1px solid #1f9bfd;
  cursor: pointer;
}
</style>
